<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog, showFailToast, showLoadingToast } from "vant";
import useConsultStore from "@/pinia/modules/consultStore.ts";

const props = defineProps<{
    payCallback: string,
    showSheet: boolean,
    orderId: string,
    actualPayment: number
}>();

const emits = defineEmits<{
    (eventName: "update:show", flag: boolean): void
    (eventName:"clearOrderId"):void
}>();

const router = useRouter();

const consultStore = useConsultStore();


/*支付方式*/
const paymentMethod = ref<0 | 1 | 2>(1);

/*支付方式面板组件关闭之前触发的回调函数*/
const beforeCloseSheet = async () => {
    const confirm: "cancel" | "confirm" = await showConfirmDialog({
        title: "关闭支付",
        message: "取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？",
        cancelButtonText: "仍要关闭",
        confirmButtonText: "继续支付",
    }).catch(error => error);
    if (confirm === "cancel") {
        emits("clearOrderId")
        await router.replace("/consultRecord");
    }
};


/*点击立即支付按钮的回调函数(进行支付)*/
const handlePay = async () => {
    showLoadingToast("正在支付···");
    try {
        location.href = await consultStore.consultOrderPay({ paymentMethod: paymentMethod.value, payCallback: props.payCallback, orderId: props.orderId });
    } catch (error: any) {
        showFailToast(error.message);
        await router.replace("/consultRecord");
    }
};

</script>

<template>
    <van-action-sheet :show="showSheet" @update:show="emits('update:show',$event)" title="选择支付方式" :close-on-popstate="false" :closeable="false" :before-close="beforeCloseSheet">
        <div class="pay-type">
            <p class="amount">￥{{ actualPayment.toFixed(2) }}</p>
            <van-cell-group>
                <van-cell title="微信支付" @click="paymentMethod = 0">
                    <template #icon>
                        <svg-icon svg-name="wechat" />
                    </template>
                    <template #extra>
                        <van-checkbox :checked="paymentMethod === 0" />
                    </template>
                </van-cell>
                <van-cell title="支付宝支付" @click="paymentMethod = 1">
                    <template #icon>
                        <svg-icon svg-name="alipay" />
                    </template>
                    <template #extra>
                        <van-checkbox :checked="paymentMethod === 1" />
                    </template>
                </van-cell>
                <van-cell title="云支付" @click="paymentMethod = 2">
                    <template #icon>
                        <svg-icon svg-name="union" />
                    </template>
                    <template #extra>
                        <van-checkbox :checked="paymentMethod === 2" />
                    </template>
                </van-cell>
            </van-cell-group>
            <div class="btn">
                <van-button type="primary" round block @click="handlePay">立即支付</van-button>
            </div>
        </div>
    </van-action-sheet>
</template>

<style scoped lang="scss">
.pay-type {
    .amount {
        padding: 20px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .btn {
        padding: 15px;
    }

    .van-cell {
        align-items: center;

        .cp-icon {
            margin-right: 10px;
            font-size: 18px;
        }

        .van-checkbox :deep(.van-checkbox__icon) {
            font-size: 16px;
        }
    }
}
</style>
